<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>词云 echarts-wordcloud</title>
    <script src="echarts.min.js"></script>
    <script src="echarts-wordcloud.min.js"></script>
  </head>
  <body>
    <div id="main" style="height: 500px; width: 500px">
      <canvas id="cvs" style="height: 500px; width: 500px"></canvas>
    </div>
    <!-- <div id="loading">正在加载...</div> -->

    <script src="data.js"></script>
    <!-- <script>
      var loading = document.getElementById("loading");
      setTimeout(() => (loading.style.display = "none"), 2000);
    </script> -->
    <script>
      var chart = echarts.init(document.getElementById("main"));
      var maskImage = document.getElementById("cvs");
      chart.setOption({
        series: [
          {
            type: "wordCloud",

            // The shape of the "cloud" to draw. Can be any polar equation represented as a
            // callback function, or a keyword present. Available presents are circle (default),
            // cardioid (apple or heart shape curve, the most known polar equation), diamond (
            // alias of square), triangle-forward, triangle, (alias of triangle-upright, pentagon, and star.

            shape: "circle",

            // A silhouette image which the white area will be excluded from drawing texts.
            // The shape option will continue to apply as the shape of the cloud to grow.

            maskImage: maskImage,

            // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
            // Default to be put in the center and has 75% x 80% size.

            left: "center",
            top: "center",
            width: "70%",
            height: "80%",
            right: null,
            bottom: null,

            // Text size range which the value in data will be mapped to.
            // Default to have minimum 12px and maximum 60px size.

            sizeRange: [12, 60],

            // Text rotation range and step in degree. Text will be rotated randomly in range [-90, 90] by rotationStep 45

            rotationRange: [-45, 45],
            rotationStep: 45,

            // size of the grid in pixels for marking the availability of the canvas
            // the larger the grid size, the bigger the gap between words.

            gridSize: 8,

            // set to true to allow word being draw partly outside of the canvas.
            // Allow word bigger than the size of the canvas to be drawn
            drawOutOfBound: false,

            // Global text style
            textStyle: {
              normal: {
                fontFamily: "sans-serif",
                fontWeight: "bold",
                // Color can be a callback function or a color string
                color: function () {
                  // Random color
                  return (
                    "rgb(" +
                    [
                      Math.round(Math.random() * 160),
                      Math.round(Math.random() * 160),
                      Math.round(Math.random() * 160),
                    ].join(",") +
                    ")"
                  );
                },
              },
              emphasis: {
                shadowBlur: 10,
                shadowColor: "#333",
              },
            },

            // Data is an array. Each array item must have name and value property.
            data: words,
          },
        ],
      });
    </script>
  </body>
</html>
